/* eslint-disable react/jsx-no-target-blank */
import { Icon } from "@iconify/react";
import EasyTyper from "easy-typer-js";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";

const Styled = styled.div`
  width: 100%;
  height: 100%;
  .absolute-lrt {
    position: absolute;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
  }
  .h-screen {
    height: 100vh;
  }
  .text-center {
  }
  .text-white {
    --un-text-opacity: 1;
    color: rgba(255, 255, 255, var(--un-text-opacity));
    text-align: center;
  }
  .container {
    position: absolute;
    left: 0rem;
    right: 0rem;
    text-align: center;
    margin-top: 43vh;
    color: #fff;
    .container-title {
      font-size: 7rem;
      font-weight: 700;
    }
    @media (min-width: 1024px) {
      .container-title {
        font-size: 10rem;
      }
    }
    .container-EasyTyper {
      font-size: 4rem;
    }
    @media (min-width: 1024px) {
      .container-EasyTyper {
        font-size: 5.5rem;
      }
    }
    .container-phone {
      font-size: 5.5rem;
      margin-top: 0.75rem;
      a {
        margin-right: 2.25rem;
      }
    }
    @media (min-width: 1024px) {
      .container-phone {
        display: none;
      }
    }
  }
  .arrow {
    cursor: pointer;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 2.5rem;
    font-size: 6.25rem;
  }
`;

const HomeBanner = () => {
  const appStore = useSelector((state) => state.app);
  const {
    blogInfo: { blog_config, page_list = [] },
  } = appStore;

  //打印机实例
  const [typer, setTyper] = useState(null);
  // 打字机内容
  const [output, setOutPut] = useState("");

  // 打字机特效配置
  const typeObj = {
    output: "",
    isEnd: false, // 全局控制是否终止
    speed: 300, // 打字速度
    singleBack: false, // 单次的回滚
    sleep: 0, // 完整输出一句话后, 睡眠一定时候后触发回滚事件
    type: "normal", // rollback, normal
    backSpeed: 80, // 回滚速度
    sentencePause: false, // 运行完毕后, 句子是否暂停显示
  };

  const getOneSentence = useCallback(function () {
    // 一言 + 打字机特效
    fetch("https://v1.hitokoto.cn?c=i")
      .then((res) => res.json())
      .then((data) =>
        setTyper(
          new EasyTyper(typeObj, data.hitokoto, completeAsentence, changeOutput)
        )
      )
      .catch(() =>
        setTyper(
          new EasyTyper(
            typeObj,
            "宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒。",
            completeAsentence,
            changeOutput
          )
        )
      );
  }, []);

  //封面样式
  const coverStyle = useMemo(() => {
    const page = page_list.find((e) => e.label === "home");

    return page
      ? {
          background: `url('${page.cover}') center center / cover no-repeat`,
        }
      : {
          background: "grey center center / cover no-repeat",
        };
  }, [page_list]);

  // 输出完毕后的回调函数
  function completeAsentence() {
    console.log("输出完毕！长官！");
  }

  // 钩子函数和setState结合
  function changeOutput(output) {
    setOutPut(output);
  }

  function scrollDown() {
    window.scrollTo({
      behavior: "smooth",
      top: document.documentElement.clientHeight,
    });
  }

  useEffect(() => {
    getOneSentence();
  }, []);

  return (
    <Styled
      className="banner-fade-down  absolute-lrt h-screen text-center text-white"
      style={coverStyle}
    >
      <div className="container">
        <h1 className="container-title animate-zoom-in">
          {blog_config.website_name}
        </h1>
        {/* 打印机特效 */}
        <div className="container-EasyTyper">
          {output}
          <span className="animate-ping">|</span>
        </div>
        {/* 移动端专用 */}
        <div className="container-phone">
          <a
            target="_blank"
            href={`http://wpa.qq.com/msgrd?v=3&uin=${blog_config.qq}&site=qq&menu=yes`}
          >
            <Icon icon="ant-design:qq-circle-filled" />
          </a>
          <a href={blog_config.github} target="_blank">
            <Icon icon="mdi:github" />
          </a>
          <a href={blog_config.gitee} target="_blank">
            <Icon icon="simple-icons:gitee" />
          </a>
        </div>
      </div>
      {/* 向下滚动 */}
      <div className="arrow" onClick={scrollDown}>
        <Icon
          className="animate-bounce"
          icon="ri:arrow-down-s-fill"
          color="white"
        />
      </div>
    </Styled>
  );
};

export default HomeBanner;
